<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('inicio').className='selected';
                }
                window.onload=title;
            </script>
            <h1 class="title"></h1>
            <div class="row">
                <div class="twelve columns">
                    <p:growl widgetVar="growl" showDetail="true" />
                    <p:socket onMessage="handleMessage" channel="/notifications" />
                    <h:form>
                        <div class="container_24 clearfix ">

                            <div class="grid_11" style="margin: 23px auto; text-align: center;">  
                                <p:graphicImage value="assets/images/#{managerIndex.clinic.cod}" />
                            </div>

                            <div class="grid_7"  style="margin: 15px auto;" >
                                <p:donutChart title="Distribuição por Sexo" showDataLabels="true" 
                                              styleClass="grid_13" style="width:250px;height:200px"
                                              value="#{managerIndex.gender}" legendPosition="w"/>
                            </div>

                            <div class="grid_6"  style="margin: 6px auto;">
                                <div class="grid_23" style="text-align: center;">
                                    <h4>Estatísticas Gerais</h4>
                                </div>
                                <h:outputLabel value="Total de Pacientes:" styleClass="grid_15"/>
                                <p:outputLabel value="#{managerIndex.countCustomer()}" styleClass="grid_8"/>
                                <div class="clear"/>
                                <h:outputLabel value="Total de Exame:" styleClass="grid_15"/>
                                <p:outputLabel value="#{managerIndex.countProcedureExame()}" styleClass="grid_8"/>
                                <div class="clear"/>
                                <h:outputLabel value="Total de Consultas: " styleClass="grid_15"/>
                                <p:outputLabel value="#{managerIndex.countProcedureConsulta()}" styleClass="grid_8"/>
                                <div class="clear"/>
                                <h:outputLabel value="Convênios: " styleClass="grid_15"/>
                                <p:outputLabel value="#{managerIndex.countOperator()}" styleClass="grid_8"/>
                                <div class="clear"/>
                            </div>
                            <div class="clear"/>
                            <div class="grid_23">  

                                <p:lineChart id="grfLinear" rendered="#{managerIndex.admin}" title="Total de Procedimento por Mês"
                                             legendPosition="ne"  
                                             value="#{managerIndex.linearProcedureDate}"  animate="true" 
                                             styleClass="grid_23" minY="0" minX="0" 
                                             maxY="#{managerIndex.max}"
                                             xaxisLabel="Meses" yaxisLabel="Quantidade"/>
                            </div>
                            <div class="clear"/>
                            <div class="grid_23"> 
                                
                                
                            </div>
                        </div>
                    </h:form>
                </div>
            </div>

        </ui:define>
    </ui:composition>
</html>
